<template>
  <div class="demand">
    <!-- 我的商户 -->
    <div class="query">
      <div class="queryBtn">
        <el-button size="mini" type="primary" @click="toDemandForm">新增</el-button>
        <el-button
          size="mini"
          style="border: none;color: #626366;font-size: 14px;background-color: #f1f1f1"
          @click="handleShowFiltrate"
        >
          <i class="iconshalou"></i>高级查询
        </el-button>
      </div>
      <div class="search">
        <el-input
          v-model="search"
          size="mini"
          class="searchInput"
          placeholder="请输入店铺ID/任务标题/路径/备注等关键词"
          clearable
          @keyup.enter.native="handleSearch(search)"
        ></el-input>
        <el-button
          size="mini"
          style="padding: 8px 20px;margin-left: 10px;border: none;color: #626366;background-color: #f1f1f1"
          @click="handleSearch(search)"
        >搜索</el-button>
      </div>
    </div>
    <!-- 高级查询内容 -->
    <el-collapse-transition>
      <div class="filtrate" v-show="!isShow">
        <el-form ref="form" :model="form" label-width="110px">
          <el-form-item label="负责人">
            <el-radio-group
              v-model="form.sv_master_id"
              text-color="#fff"
              fill="#409eff"
              size="mini"
            >
              <el-radio-button label>全部</el-radio-button>
              <el-radio-button
                v-for="(item, index) in principalArr"
                :key="index"
                :value="item.sv_d_user_name"
                :label="item.sv_d_user_id"
              >{{item.sv_d_user_name}}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="优先级">
            <el-radio-group v-model="form.sv_priority" text-color="#fff" fill="#409eff" size="mini">
              <el-radio-button label>全部</el-radio-button>
              <el-radio-button label="1">普通</el-radio-button>
              <el-radio-button label="2">次要</el-radio-button>
              <el-radio-button label="3">主要</el-radio-button>
              <el-radio-button label="4">严重</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="任务类型">
            <el-radio-group v-model="form.sv_type" text-color="#fff" fill="#409eff" size="mini">
              <el-radio-button label>全部</el-radio-button>
              <el-radio-button
                v-for="(item, index) in taskTypeArr"
                :key="index"
                :label="item.id"
              >{{item.name}}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="客户端">
            <el-radio-group
              v-model="form.sv_client_type"
              text-color="#fff"
              fill="#409eff"
              size="mini"
            >
              <el-radio-button label>全部</el-radio-button>
              <el-radio-button label="1">PC端-网页</el-radio-button>
              <el-radio-button label="2">PC端-绿色客户端</el-radio-button>
              <el-radio-button label="3">PC端-蓝色客户端</el-radio-button>
              <el-radio-button label="4">安卓-手持&大屏</el-radio-button>
              <el-radio-button label="5">IOS&Ipad</el-radio-button>
              <el-radio-button label="6">小程序</el-radio-button>
              <el-radio-button label="7">微商城</el-radio-button>
              <el-radio-button label="8">代理商平台</el-radio-button>
              <el-radio-button label="9">官网</el-radio-button>
              <el-radio-button label="10">德客学院</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="反馈时间">
            <div class="block-start">
              <el-radio-group
                v-model="form.feedbackTime"
                size="mini"
                @change="ChangeFeedbackTimeRange"
                text-color="#fff"
                fill="#409eff"
              >
                <el-radio-button label>全部</el-radio-button>
                <el-radio-button label="1">7天前</el-radio-button>
                <el-radio-button label="2">15天前</el-radio-button>
                <el-radio-button label="3">一个月前</el-radio-button>
                <el-radio-button label="4">三个月前</el-radio-button>
                <el-radio-button label="5">一年前</el-radio-button>
              </el-radio-group>
              <el-date-picker
                v-model="form.feedbackTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="mini"
                style="margin-left: 12px"
                @change="changeFeedbackDetailedDate"
              ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="截止时间">
            <div class="block-start">
              <el-radio-group
                v-model="form.deadline"
                text-color="#fff"
                fill="#409eff"
                size="mini"
                @change="ChangeDeadlineTimeRange"
              >
                <el-radio-button label>全部</el-radio-button>
                <el-radio-button label="1">已过期</el-radio-button>
                <el-radio-button label="2">7天内</el-radio-button>
                <el-radio-button label="3">15天内</el-radio-button>
                <el-radio-button label="4">一个月内</el-radio-button>
                <el-radio-button label="5">三个月内</el-radio-button>
                <el-radio-button label="6">一年内</el-radio-button>
              </el-radio-group>
              <el-date-picker
                v-model="form.deadline"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="mini"
                @change="changeDeadlineDetailedDate"
              ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="当前状态">
            <div class="block-between">
              <el-radio-group v-model="form.sv_status" size="mini" text-color="#fff" fill="#409eff">
                <el-radio-button label>全部</el-radio-button>
                <el-radio-button label="1">已反馈</el-radio-button>
                <el-radio-button label="2">待排期</el-radio-button>
                <el-radio-button label="3">开发中</el-radio-button>
                <el-radio-button label="4">测试中</el-radio-button>
                <el-radio-button label="5">已上线</el-radio-button>
                <el-radio-button label="6">暂缓</el-radio-button>
                <el-radio-button label="-1">拒绝</el-radio-button>
              </el-radio-group>
              <el-button type="primary" size="mini" @click="handleFiltrate(form)">筛选</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-collapse-transition>
    <div class="condition">
      <strong>任务进度统计：</strong>
      <strong v-for="(item, key, index) in conditionArr">
        {{key}}
        <span>{{item}}</span>
      </strong>
    </div>
    <!-- 表格内容 -->
    <el-table
      :data="tableData"
      class="fromContent"
      style="font-size: 14px"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.8)"
    >
      <el-table-column width="50px" align="center" type="index" label="序号"></el-table-column>
      <el-table-column
        align="center"
        min-width="220"
        :show-overflow-tooltip="true"
        prop="sv_title"
        label="任务"
      ></el-table-column>
      <el-table-column align="center" label="店铺ID" min-width="120">
        <template slot-scope="scope">
          <div class="contentToDraw">
            <span>{{ scope.row.user_id}}</span>
            <!-- <span
              class="dec"
              :class="scope.row.isStore === '分' ? 'fendian' : ''"
            >{{scope.row.isStore}}</span>-->
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="sv_master_id" label="负责人">
        <template slot-scope="scope">
          <span
            v-for="(item, index) in principalArr"
            :key="index"
          >{{scope.row.sv_master_id == item.sv_d_user_id ? item.sv_d_user_name: ''}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="sv_priority" label="优先级">
        <template slot-scope="scope">
          <span
            v-for="(item, index) in priorityArr"
            :key="index"
          >{{scope.row.sv_priority == item.id ? item.name: ''}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="sv_type" label="任务类型">
        <template slot-scope="scope">
          <span
            v-for="(item, index) in taskTypeArr"
            :key="index"
          >{{scope.row.sv_type == item.id ? item.name: ''}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="120" align="center" prop="sv_client_type" label="客户端">
        <template slot-scope="scope">
          <span
            v-for="(item, index) in clientArr"
            :key="index"
          >{{scope.row.sv_client_type == item.id ? item.name: ''}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="120" align="center" prop="sv_status" label="当前进度">
        <template slot-scope="scope">
          <span
            v-for="(item, index) in statusArr"
            :key="index"
          >{{scope.row.sv_status == item.id ? item.name: ''}}</span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="125"
        align="center"
        prop="sv_creation_date"
        :formatter="dateFormat"
        label="反馈时间"
      ></el-table-column>
      <el-table-column
        align="center"
        min-width="125"
        prop="sv_end_time"
        label="截止时间"
        :formatter="dateFormat"
      ></el-table-column>
      <el-table-column align="center" label="操作" min-width="160">
        <!-- scoped.row 指的是当前行的数据 -->
        <template slot-scope="scope">
          <div class="operate">
            <span @click="toDemandForm(scope.row)">查看</span>
            <span @click="drawerToggle(scope.row)">日志</span>
            <span @click="deleteOrder(scope.row)">删除</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 这个是分页器 -->
    <Pagination
      :total="total"
      :pageIndex="pageIndex"
      :pageSize="pageSize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></Pagination>
    <el-drawer :visible.sync="drawer" :with-header="false">
      <h3>{{drawerObj.title}}</h3>
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      loading: true,
      // 搜索的数据绑定
      search: "",
      // 高级查询的数据
      form: {
        sv_master_id: "", // 负责人id
        sv_priority: "", // 优先级
        sv_type: "", // 任务类型
        sv_client_type: "", // 客户端
        sv_status: "", // 当前进度
        feedbackTime: "", // 反馈时间
        sv_createtime_begin: "", // 反馈开始时间
        sv_createtime_end: "", // 反馈结束时间
        deadline: "", // 截止时间
        sv_endtime_begin: "", // 截止开始时间
        sv_endtime_end: "", // 截止结束时间
        sv_status: "" // 当前状态
      },
      principalArr: [], // 员工数据---负责人
      taskTypeArr: [
        { id: 1, name: "Bug" },
        { id: 2, name: "优化" },
        { id: 3, name: "新需求" },
        { id: 4, name: "用户场景" }
      ],
      priorityArr: [
        { id: 1, name: "普通" },
        { id: 2, name: "次要" },
        { id: 3, name: "主要" },
        { id: 4, name: "严重" }
      ],
      clientArr: [
        { id: 1, name: "PC端-网页" },
        { id: 2, name: "PC端-绿色客户端" },
        { id: 3, name: "PC端-蓝色客户端" },
        { id: 4, name: "安卓-手持&大屏" },
        { id: 5, name: "IOS&Ipad" },
        { id: 6, name: "小程序" },
        { id: 7, name: "微商城" },
        { id: 8, name: "代理商平台" },
        { id: 9, name: "官网" },
        { id: 10, name: "德客学院" }
      ],
      statusArr: [
        { id: 1, name: "已反馈" },
        { id: 2, name: "待排期" },
        { id: 3, name: "开发中" },
        { id: 4, name: "测试中" },
        { id: 5, name: "已上线" },
        { id: 6, name: "暂缓" },
        { id: -1, name: "拒绝" }
      ],
      conditionArr: [],
      // 响应筛选展开与否
      paramter: {},
      isShow: true,
      // 抽屉
      drawer: false,
      drawerObj: {
        title: ""
      },
      // 分页器的数据
      total: 0, // 总条数
      pageIndex: 1, // 当前页
      pageSize: 10, // 每页数量
      url: "",
      // 身份令牌
      myToken: ""
    };
  },
  components: {
    Pagination
  },
  methods: {
    // 初始化函数
    init() {
      // 格式化时间
      this.timeFormatting = this.utils.timeFormatting();
      // 获取令牌
      this.myToken = sessionStorage.getItem("myToken");
      // 初始化列表
      this.getOrderData();
      // 获取员工(负责人)列表
      this.$api.getManagerData(this.myToken).then(res => {
        this.principalArr = res.dataList.map(v => {
          return { ...v };
        });
      });
    },
    // 获取订单列表
    getOrderData() {
      this.loading = true;
      // return;
      this.paramter = {
        Page: this.pageIndex,
        PageSize: this.pageSize,
        sv_master_id: this.form.sv_master_id,
        sv_priority: this.form.sv_priority,
        sv_type: this.form.sv_type,
        sv_createtime_begin: this.form.sv_createtime_begin,
        sv_createtime_end: this.form.sv_createtime_end,
        sv_endtime_begin: this.form.sv_endtime_begin,
        sv_endtime_end: this.form.sv_endtime_end,
        sv_client_type: this.form.sv_client_type,
        sv_status: this.form.sv_status,
        Query: this.search
      };
      // 获取数据列表
      this.$api.getDemandList(this.paramter, this.myToken).then(res => {
        this.loading = false;
        this.total = res.total;
        this.tableData = res.dataList.map(v => {
          return { ...v };
        });
      });
      // 获取状态码统计
      this.$api
        .getStateCountStatistics(this.paramter, this.myToken)
        .then(res => {
          const { succeed, errmsg, values } = res;
          if (succeed) {
            this.conditionArr = values;
          } else {
            this.$message.error(errmsg);
          }
        });
    },
    //时间格式化
    dateFormat(row, column) {
      var date = row[column.property];
      if (!date) {
        return "";
      }
      return this.$moment(date).format("YYYY-MM-DD HH:mm");
    },
    // 分页器的方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.getOrderData();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getOrderData();
    },
    // 搜索功能
    handleSearch(val) {
      this.pageIndex = 1;
      this.getOrderData();
    },
    // 高级查询
    handleShowFiltrate(val) {
      this.isShow = !this.isShow;
    },
    // 进行筛选
    handleFiltrate(val) {
      this.pageIndex = 1;
      this.getOrderData();
    },
    // 格式化反馈时间
    changeFeedbackDetailedDate(val) {
      if (val) {
        this.form.sv_createtime_begin = new Date(val[0]).Format(
          "yyyy-MM-dd hh:mm:ss"
        );
        this.form.sv_createtime_end = new Date(val[1]).Format(
          "yyyy-MM-dd hh:mm:ss"
        );
      } else {
        this.form.sv_createtime_begin = "";
        this.form.sv_createtime_end = "";
      }
    },
    // 反馈时间筛选
    ChangeFeedbackTimeRange(val) {
      // 几天前到今天为止
      this.form.sv_createtime_end = new Date().Format("yyyy-MM-dd hh:mm:ss");
      if (!val) {
        this.form.sv_createtime_begin = "";
      } else if (val == 1) {
        this.form.sv_createtime_begin = new Date(
          new Date().getTime() - 86400000 * 7
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 2) {
        this.form.sv_createtime_begin = new Date(
          new Date().getTime() - 86400000 * 15
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 3) {
        this.form.sv_createtime_begin = new Date(
          new Date().getTime() - 86400000 * 30
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 4) {
        this.form.sv_createtime_begin = new Date(
          new Date().getTime() - 86400000 * 90
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 5) {
        this.form.sv_createtime_begin = new Date(
          new Date().getTime() - 86400000 * 365
        ).Format("yyyy-MM-dd hh:mm:ss");
      }
    },
    // 格式化截止时间
    changeDeadlineDetailedDate(val) {
      if (val) {
        this.form.sv_endtime_begin = new Date(val[0]).Format(
          "yy-MM-dd hh:mm:ss"
        );
        this.form.sv_endtime_end = new Date(val[1]).Format("yy-MM-dd hh:mm:ss");
      } else {
        this.form.sv_endtime_begin = "";
        this.form.sv_endtime_end = "";
      }
    },
    // 截止时间筛选
    ChangeDeadlineTimeRange(val) {
      this.form.sv_endtime_begin = new Date().Format("yyyy-MM-dd hh:mm:ss");
      if (val == 1) {
        this.form.sv_endtime_begin = "2017-01-01 00:00:00";
        this.form.sv_endtime_end = new Date(new Date().getTime()).Format(
          "yyyy-MM-dd hh:mm:ss"
        );
      } else if (val == 2) {
        this.form.sv_endtime_end = new Date(
          new Date().getTime() + 86400000 * 7
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 3) {
        this.form.sv_endtime_end = new Date(
          new Date().getTime() + 86400000 * 15
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 4) {
        this.form.sv_endtime_end = new Date(
          new Date().getTime() + 86400000 * 30
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 5) {
        this.form.sv_endtime_end = new Date(
          new Date().getTime() + 86400000 * 90
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 6) {
        this.form.sv_endtime_end = new Date(
          new Date().getTime() + 86400000 * 365
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else {
        this.form.sv_endtime_end = "";
      }
    },
    // 跳转到详情
    toDemandForm(v) {
      if (v.sv_id) {
        this.$router.push(`/admin/demandForm?id=${v.sv_id}`);
      } else {
        this.$router.push("/admin/demandForm");
      }
    },
    // 抽屉日志详情
    drawerToggle(v) {
      this.$message({
        message: "开发中!",
        type: "warning"
      });
      return;
      this.drawer = true;
      this.drawerObj.title = v.sv_title;
    },
    // 删除
    deleteOrder(v) {
      this.$api.deleteDemandOrder(v.sv_id, this.myToken).then(res => {
        if (res.succeed) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.getOrderData();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    }
  },
  mounted() {
    // 初始化函数
    this.init();
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.demand {
  background-color: #fff;
  padding: 20px;
  // 搜索部分的样式
  .query {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .search {
      display: flex;
      .searchInput {
        width: 320px;
        margin-right: 10px;
      }
    }
  }
  .filtrate {
    margin: 20px 0;
    margin-top: 0;
    background-color: #f1f1f1;
    .el-radio-button {
      margin-right: 10px;
    }
    .block-start {
      display: flex;
      align-items: baseline;
    }
    .block-between {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-right: 20px;
    }
  }
  .condition {
    font-size: 14px;
    padding-bottom: 40px;
    span {
      color: #f00;
      margin-right: 10px;
    }
  }
  // 筛选的每一项
  .filtrate @{deep} .el-form-item {
    margin-bottom: 0;
  }
  // 筛选项的标题
  .filtrate @{deep} .el-form-item__label {
    color: #000;
    font-weight: 600;
  }
  // 筛选项的内容
  .filtrate @{deep} .el-radio-button__inner {
    border: 1px solid #f1f1f1;
    background-color: #f1f1f1;
    color: #626366;
    font-size: 14px;
  }
  // 筛选项选中内容
  .filtrate @{deep} .is-active .el-radio-button__inner {
    background-color: #f1f1f1;
    border: 1px solid #439fff;
    box-shadow: unset;
    color: #666;
    border-radius: 4px;
  }
  // 表格的样式
  .fromContent {
    margin: 0 auto 40px;
    // 总分店的样式
    .dec {
      background-color: #3399ff;
      color: #fff;
      padding: 0px 8px;
      &.fendian {
        background-color: #ff6600;
      }
    }
  }
  // 更改自带样式
  .fromContent @{deep} .serveBox.el-button {
    border: none;
    padding: 0;
    margin-right: 5px;
  }
  .fromContent
    @{deep}
    .el-table__body-wrapper.is-scrolling-none
    ~ .el-table__fixed-right {
    z-index: 0;
  }
  .fromContent @{deep} .el-table__fixed-right {
    z-index: 0;
  }
  .operate {
    span {
      cursor: pointer;
      color: #0094ff;
    }
  }
}
// 更改表头颜色
.demand @{deep} .el-table th {
  background-color: #fafafa;
  color: #252525;
  font-weight: 100;
}
.demand @{deep} .el-table::before {
  height: 0;
}
.demand @{deep}.el-button + .el-button {
  margin-left: 0;
}
</style>